<template>
    <div class="detail-container" v-loading="loading">
                <el-card class="box-card" style="padding:20px;width:840px;height:1188px;margin:0 auto">
                    <div id="print-div2">
                        <div class="title">工业品买卖合同</div>
                        <div class="paper-top">
                            <el-row :gutter="30">
                                <el-col :span="15">
                                    <el-row>
                                        <el-col :span="7"><div class="label" style="letter-spacing:2px">出卖方(供方)：</div></el-col>
                                        <el-col :span="17">
                                            <div class="text">{{orderInfo.sellerName}}</div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="9">
                                    <el-row>
                                        <el-col :span="7"><div class="label">合同编号：</div></el-col>
                                        <el-col :span="17">
                                            <div class="text">{{orderInfo.orderSn}}</div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                            <el-row :gutter="30">
                                <el-col :span="9" :offset="15">
                                    <el-row>
                                        <el-col :span="7"><div class="label">签订地点：</div></el-col>
                                        <el-col :span="17">
                                            <div class="text">{{orderInfo.orderAddress}}</div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                            <el-row :gutter="30">
                                <el-col :span="15">
                                    <el-row>
                                        <el-col :span="7"><div class="label" style="letter-spacing:2px">买受方(需方)：</div></el-col>
                                        <el-col :span="17">
                                            <div class="text">{{orderInfo.customerName}}</div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="9">
                                    <el-row>
                                        <el-col :span="7"><div class="label">签订日期：</div></el-col>
                                        <el-col :span="17">
                                            <div class="text">{{orderInfo.createDate}}</div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="paper-title">
                            <span class="title-no">第一条</span>标的、数量、价款及交（提）货时间：
                        </div>
                        <div class="good-table">
                            <table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-left:2px solid #000;border-bottom:2px solid #000">
                                <tr>
                                    <th align="center" style="border-top:2px solid #000">商品名称</th>
                                    <th align="center" style="border-top:2px solid #000">规格型号</th>
                                    <th align="center" style="border-top:2px solid #000">单位</th>
                                    <th align="center" style="border-top:2px solid #000">数量</th>
                                    <th align="center" style="border-top:2px solid #000">单价(元)</th>
                                    <th align="center" style="border-top:2px solid #000">金额（元）</th>
                                    <th align="center" style="border-right: 2px solid #000;border-top:2px solid #000">备注</th>
                                </tr>
                                <tr v-for="item in orderInfo.orderGoods">
                                    <td align="center"><div class="td-con">{{item.goodsName}}</div></td>
                                    <td align="center"><div class="td-con" >{{item.goodsSn}}</div></td>
                                    <td align="center" style="width:60px"><div class="td-con">{{item.unit}}</div></td>
                                    <td align="center"><div  class="td-con" style="white-space:nowrap;">{{item.goodsNum}}</div></td>
                                    <td align="center"><div class="td-con" style="white-space:nowrap;">{{item.goodsPrice}}</div></td>
                                    <td align="center"><div style="white-space:nowrap;"  class="td-con">{{item.goodsAmount}}</div></td>
                                    <td align="center"  style="border-right: 2px solid #000"><div class="td-con">{{item.remark}}</div></td>
                                </tr>
                                <tr>
                                    <td colspan="2"><div style="letter-spacing: 11px;padding-left:15px">合计</div></td>
                                    <td align="center" style="border-right:0"></td>
                                    <td align="center" style="border-right:0">{{orderInfo.ordGoodsNum}}</td>
                                    <td align="center" style="border-right:0"></td>
                                    <td align="center" style="border-right:0">{{orderInfo.goodsAmount}}</td>
                                    <td align="center"  style="border-right: 2px solid #000"></td>
                                </tr>
                                <tr>
                                    <td colspan="2"><div style="padding-left:15px">物流费</div></td>
                                    <td align="center" style="border-right:0"></td>
                                    <td align="center" style="border-right:0"></td>
                                    <td align="center" style="border-right:0"></td>
                                    <td align="center" style="border-right:0">0.00</td>
                                    <td align="center"  style="border-right: 2px solid #000"></td>
                                </tr>
                                <tr>
                                    <td colspan="2"><div style="padding-left:10px">订单总价</div></td>
                                    <td align="center" style="border-right:0"></td>
                                    <td align="center" style="border-right:0"></td>
                                    <td align="center" style="border-right:0"></td>
                                    <td align="center" style="border-right:0">{{orderInfo.goodsAmount}}</td>
                                    <td align="center"  style="border-right: 2px solid #000"></td>
                                </tr>
                            </table>
                        </div>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no"><div style="white-space:nowrap;">第二条</div></td>
                                <td><div style="white-space:nowrap;">货物总金额：</div></td>
                                <td width="620" ><div class="tianXie">{{orderInfo.goodsAmountZH | fifterNull}}</div></td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no"><div style="white-space:nowrap;">第三条</div></td>
                                <td><div style="white-space:nowrap;">产品质量及售后服务标准：</div></td>
                                <td width="620"><div class="tianXie">按原厂出厂标准及原厂厂家售后服务标准执行。</div></td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no"><div style="white-space:nowrap;">第四条</div></td>
                                <td><div style="white-space:nowrap;">包装标准、包装物的供应与回收：</div></td>
                                <td width="620"><div class="tianXie">原厂包装，包装物不回收。</div></td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no"><div style="white-space:nowrap;">第五条</div></td>
                                <td><div style="white-space:nowrap;">标的物自买受人收到时</div></td>
                                <td width="620">
                                    <span class="tianXie">买受人收到</span>
                                    时起转移，但买受人未支付价款义务的，标的物仍属于出卖人。
                                </td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no" valign="top"><div style="white-space:nowrap;" >第六条</div></td>
                                <td valign="top"><div style="white-space:nowrap;">交（提）货方式、地点：</div></td>
                                <td width="620" valign="top">
                                    <div class="tianXie">{{orderInfo.deliveryType | fifterNull}}</div>
                                    <div class="tianXie">{{orderInfo.addressInfo}}</div>
                                </td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no" valign="top"><div style="white-space:nowrap;" >第七条</div></td>
                                <td valign="top"><div style="white-space:nowrap;">运输方式及到达站（港）和费用负担：</div></td>
                                <td width="620" valign="top">
                                    <div class="tianXie">{{orderInfo.sendType | fifterNull}}</div>
                                </td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no" valign="top"><div style="white-space:nowrap;" >第八条</div></td>
                                <td valign="top"><div style="white-space:nowrap;">检验标准、方法、地点及期限：</div></td>
                                <td width="620" valign="top">
                                    <div class="tianXie">买受人对质量有异议，应于7日内书面提出。</div>
                                </td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no" valign="top"><div style="white-space:nowrap;" >第九条</div></td>
                                <td valign="top"><div style="white-space:nowrap;">成套设备的安装与调试：</div></td>
                                <td width="620" valign="top">
                                    <div class="tianXie" style="text-align: center">无。</div>
                                </td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no" valign="top"><div style="white-space:nowrap;" >第十条</div></td>
                                <td valign="top"><div style="white-space:nowrap;">结算方式、时间及地点：</div></td>
                                <td width="620" valign="top">
                                    <div class="tianXie">{{orderInfo.settleType | fifterNull}}</div>
                                </td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no" valign="top"><div style="white-space:nowrap;" >第十一条</div></td>
                                <td valign="top"><div style="white-space:nowrap;">担保方式（也可另立担保合同）：</div></td>
                                <td width="620" valign="top">
                                    <div class="tianXie" style="text-align: center">无。</div>
                                </td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no" valign="top"><div style="white-space:nowrap;">第十二条</div></td>
                                <td valign="top"><div style="white-space:nowrap;">违约责任：</div></td>
                                <td width="620" valign="top">
                                    一方违约承担
                                    <span class="tianXie" style="padding:0 10px">15</span>
                                    %违约金，延期付款每日按应付款<span class="tianXie" style="padding:0 10px">0.08</span>%计算违约金。非供方原因或遭遇不可抗力（如自然灾害、战争或其他非正常因素如供方上游延迟发货或上游船期延误等）而造成供方无法按时送货或需方提货的供方不承担相应的违约责任。
                                </td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no" valign="top"><div style="white-space:nowrap;">第十三条</div></td>
                                <td width="720" valign="top">
                                    合同争议解决方式：本合同在履行过程中发生的争议，由双方当事人协商解决；也可以由当地工商
                                    <div>
                                        行政部门调解：协调或调解不成的，按下列第
                                        <span class="tianXie" style="padding:0 10px">（二）</span>方式解决。
                                    </div>
                                    <div>
                                        （一）提交原告所在地仲裁委员会仲裁；（二）依法向签属地所在地人民法院起诉。
                                    </div>

                                </td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no" valign="top"><div style="white-space:nowrap;" >第十四条</div></td>
                                <td valign="top"><div style="white-space:nowrap;">其他约定事项：</div></td>
                                <td width="620" valign="top">
                                    <div class="tianXie">1、收到合同后当日内回传有效，合同传真件或电子档同样有效。 </div>
                                    <div class="tianXie">2、本合同有效期为自合同签定之日起1年。 </div>
                                    <div class="tianXie">3、供货方按规定开具增值税专用发票。 </div>
                                    <div class="tianXie">4、如在本合同签订日前双方还有未执行完的合同，发货按合同签订时间先后顺序执行。</div>
                                    <!--v-if="orderInfo.contractOtherRemark && orderInfo.contractOtherRemark != ''"-->
                                    <div class="tianXie" style="word-break:break-all" v-if="orderInfo.contractOtherRemark && orderInfo.contractOtherRemark != ''">5、{{orderInfo.contractOtherRemark}} </div>
                                </td>
                            </tr>
                        </table>
                        <div class="paper-bottom" style="position: relative">
                            <img :src="orderInfo.imageUrl" style="position: absolute;left: 95px; width: 156px;top: 0px;" v-if="orderInfo.orderState==40"/>
                            <el-row :gutter="20">
                                <el-col :span="12" style="text-align: center">出卖人（供方）：</el-col>
                                <el-col :span="12" style="text-align: center">买受方（需方）：</el-col>
                            </el-row>
                            <el-row :gutter="20" style="margin-top:10px">
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="7"><div class="label" style="letter-spacing:2px">出卖方(章)：</div></el-col>
                                        <el-col :span="17">
                                            <div class="text">{{orderInfo.sellerName}}</div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="7"><div class="label">买受人（章）：</div></el-col>
                                        <el-col :span="17">
                                            <div class="text">{{orderInfo.customerName}}</div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="7"><div class="label"><span style="padding-right:54px">电</span>话：</div></el-col>
                                        <el-col :span="17">
                                            <div class="text">{{orderInfo.sellerPhone}}</div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="8"><div class="label"><span style="padding-right:56px">电</span>话：</div></el-col>
                                        <el-col :span="16">
                                            <div class="text"></div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="7"><div class="label"><span style="padding-right:54px">传</span>真：</div></el-col>
                                        <el-col :span="17">
                                            <div class="text">{{orderInfo.sellerFax}}</div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="8"><div class="label"><span style="padding-right:56px">传</span>真：</div></el-col>
                                        <el-col :span="16">
                                            <div class="text"></div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="7"><div class="label" style="letter-spacing: 0.8px">开 户 银 行：</div></el-col>
                                        <el-col :span="17">
                                            <div class="text">{{orderInfo.bankName}}</div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="8"><div class="label" style="letter-spacing:1px">开 户 银 行：</div></el-col>
                                        <el-col :span="16">
                                            <div class="text"></div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="7"><div class="label"><span style="padding-right:54px">帐</span>号：</div></el-col>
                                        <el-col :span="17">
                                            <div class="text">{{orderInfo.bankAccount}}</div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="8"><div class="label"><span style="padding-right:56px">帐</span>号：</div></el-col>
                                        <el-col :span="16">
                                            <div class="text"></div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                            <div style="text-align: right;margin-top:10px">常州市工商管理局监制</div>

                        </div>
                    </div>


                </el-card>
                <div style="margin-top:40px;text-align: center" v-if="isPums==0">
                    <el-button type="primary" style="width:150px;" @click="printdiv">打印</el-button>
                    <el-button  style="width:150px;" @click="goBlack">返回</el-button>
                </div>

    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import store from '@/store'
    import {printOrder} from '@/api/partner'
    import "@/utils/jQuery.print"
    export default {
        name: "customerDetail",
        data(){
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                loading:false,
                orderId:this.$route.query.id,
                type:this.$route.query.type,
                orderInfo:{},
                isPums:this.$route.query.isPums ? this.$route.query.isPums : 0,
            }
        },
        computed: {
            ...mapGetters([
                'name',
                'mobile',
                'userId'
            ]),
        },
        created() {
            this.getPageInfo();
        },
        filters: {
            fifterNull(val){
                if(val == ''){
                    return '无'
                }else{
                    return  val
                }
            }
        },
        methods:{
            goBlack(){
                this.$router.go(-1)
            },
            //打印
            printdiv(){
                $("#print-div2").print({
                    globalStyles:true,//是否包含父文档的样式，默认为true
                    mediaPrint:true,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
                    stylesheet:null,//外部样式表的URL地址，默认为null
                    noPrintSelector:".no-print",//不想打印的元素的jQuery选择器，默认为".no-print"
                    iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
                    append:null,//将内容添加到打印内容的后面
                    prepend:null,//将内容添加到打印内容的前面，可以用来作为要打印内容
                    deferred: $.Deferred()//回调函数
                });
            },

            //获取合同详情
            getPageInfo(){
                this.loading = true;
                printOrder({orderId:this.orderId,type:this.type}).then(res=>{
                    this.orderInfo = res;
                    this.loading = false;
                });
            },


        }
    }
</script>

<style  lang="scss">
    .detail-container {
        width: 90%;
        padding: 20px 20px 20px 20px;
        margin: 20px auto;
    }
    #print-div2{
        font-size:12px;
        font-family: "SimSun";
        .title{
            font-size:18px;
            font-weight: bold;
            text-align: center;
            line-height: 22px;
            padding-top:20px;
        }
        .paper-top{
            font-size:14px;
            margin-top:10px;
            .label{
            }
            .text{
                border-bottom:1px solid #000;
            }
            margin-bottom:10px;
        }
        .paper-title{
            font-size:14px;
            line-height: 20px;
            .title-no{
                padding-right:10px;
            }
            .tianXie{
                border-bottom:1px solid #000;
                font-size:14px;
                font-weight: bold;
            }
        }
        .good-table{
            table{
                border-left:2px solid #000;
                border-bottom:2px solid #000;
                th{
                    font-weight: normal;
                    font-size:14px;
                    border-top:2px solid #000;
                    padding:5px 10px;
                    line-height: 20px;
                    border-right:1px solid #000;
                }
                td{
                    font-weight: normal;
                    border-right:1px solid #000;
                    border-top:1px solid #000;
                    padding:5px 10px;
                    line-height: 20px;
                }
                .td-con{
                    word-break:break-all;
                    font-size:12px;
                }
            }
        }
        .paper-bottom{
            margin-top:20px;
            line-height: 20px;
            font-size:14px;
        }
    }
</style>
